<template>
  <el-col :span="20" style="height: 93vh; overflow-y: scroll;padding: 0 1vh">
    <el-select v-model="value" placeholder="请选择" size="small" style="margin-bottom: 1vh" @change="draw">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <el-row :gutter="10">
      <el-col :span="12">
        <div id="mapChart1" style="height: 69vh"></div>
      </el-col>
      <el-col :span="12">
        <div id="mapChart2" style="height: 69vh"></div>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 1vh">
      <el-col :offset="1" :span="10" style="border-bottom: white solid 2px;display: flex;">
        <h2>单文本情感识别</h2>
        <el-radio v-model="radio1" label="1" border size="small">微博</el-radio>
        <el-radio v-model="radio1" label="2" border size="small">评论</el-radio>
      </el-col>
      <el-col :offset="2" :span="10" style="border-bottom: white solid 2px;display: flex">
        <h2>多文本情感识别</h2>
        <el-radio v-model="radio2" label="1" border size="small">微博</el-radio>
        <el-radio v-model="radio2" label="2" border size="small">评论</el-radio>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="1" :span="8">
        <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            :maxlength="this.textMax"
            autosize
            show-word-limit>
        </el-input>
      </el-col>
      <el-col :offset="1" :span="2">
        <el-button size="small" icon="el-icon-cpu" @click="handleSentiment" type="success">预测</el-button>
        <h1>{{ emo }}</h1>
      </el-col>
      <el-col :offset="3" :span="5">
        <el-upload
            :action="action"
            :data="extraData"
            :limit="1"
            :on-exceed="handleExceed"
            :on-change="beforeFileUpload"
            :on-success="handleFile"
            class="upload-demo"
            drag>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传csv/xlsx文件，且文本列列名为text</div>
        </el-upload>
      </el-col>
    </el-row>
    <el-drawer
        @open="handle"
        append-to-body
        title="多文本情感识别结果"
        :visible.sync="drawer"
        :before-close="handleClose">
      <h2 style="text-indent:2em;line-height: 1.5em">亲爱的{{ uname }}用户您好，您在{{
          drawer_time
        }}上传的文本文件系统已为您分析出结果</h2>
      <el-col :span="24" style="margin-bottom: 2vh">
        <div id="pieChart" style="height: 40vh"></div>
      </el-col>
      <div style="text-align: center">
        <el-button @click="drawer=false">返 回</el-button>
      </div>
    </el-drawer>
  </el-col>
</template>

<script>
import china from "@/assets/china.json";
import gx from "@/assets/gx.json";

export default {
  name: "sentimentVue",
  inject: ["openLoad", "closeLoad"],
  data() {
    return {
      action: this.$settings.HOST + '/visualization/upload/',
      extraData: {
        title: '文件',
        uploader: sessionStorage.getItem('user_id')
      },
      drawer: false,
      drawer_time: '',
      radio1: '1',
      radio2: '1',
      textarea: '',
      textMax: 210,
      uname: sessionStorage.getItem('user_name'),
      options: [{
        value: '全国',
        label: '全国'
      }, {
        value: '广西',
        label: '广西'
      }],
      value: '全国',
      emo: '',
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    handleFile(res, file) {
      this.$message.success('上传' + file.name + '成功');
      // this.reload();
      this.drawer_time = new Date().toLocaleString('zh-CN')
      this.openLoad()
      this.downloadFile(file.name)
    },
    beforeFileUpload(file) {
      this.extraData = {
        title: file.name,
        uploader: sessionStorage.getItem('user_id')
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    downloadFile(name) {
      this.$axios.post(`${this.$settings.HOST}/visualization/download/`, {
        name: name,
        uid: sessionStorage.getItem('user_id'),
      }, {
        responseType: 'blob',
      }).then(response => {
        let blob = new Blob([response.data], {
          type: 'application/octet-stream'
        })
        let eLink = document.createElement('a')
        eLink.download = `${name}`
        eLink.style.display = 'none'
        eLink.href = URL.createObjectURL(blob)
        document.body.appendChild(eLink)
        eLink.click()
        URL.revokeObjectURL(eLink.href)
        document.body.removeChild(eLink)
        this.$message.success('下载成功');
        this.closeLoad();
        this.drawer = true
      }).catch(error => {
        console.log(error.response.data);
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    handle() {
      this.$nextTick(() => {
        this.drawPie()
      })
    },
    draw() {
      const dic = {
        '全国': china, '广西': gx
      }
      this.$axios.post(`${this.$settings.HOST}/visualization/sentiment/map/`, {
        city: this.value
      }).then(response => {
        this.drawMap1(dic[this.value], response.data.map1)
        this.drawMap2(dic[this.value], response.data.map2)
      }).catch(error => {
        console.log(error.response.data);
      });
    },
    handleSentiment() {
      this.$axios.post(`${this.$settings.HOST}/visualization/sentiment/`, {
        text: this.textarea
      }).then(response => {
        this.emo = response.data.result
      }).catch(error => {
        console.log(error.response.data);
      });
    },
    drawMap1(v, ser) {
      let myChart = this.$echarts.init(document.getElementById('mapChart1'))
      this.$echarts.registerMap("map", v, {});
      myChart.setOption({
        title: {
          text: '疫情放开前',
          textStyle: {
            color: "#e63e3e"
          },
          top: '3%',
          left: '3%',
        },
        backgroundColor: 'rgba(41,52,65,0.88)',
        tooltip: {
          trigger: 'item',
          show: true
        },
        visualMap: {
          min: 0,
          max: 1,
          realtime: false,
          calculable: false,
          show: true,
          inRange: {
            color: [
              'rgba(249,251,249,0.2)', 'rgba(248,3,113,0.5)'
            ]
          }
        },
        series: [{
          itemStyle: {
            normal: {
              label: {
                show: true,
                textStyle: {
                  color: "#f3f0f1"
                }
              },
              areaColor: 'rgba(128, 128, 128, 0)', //rgba设置透明度0
              borderColor: '#007bf1',//省份边框颜色
              borderWidth: 1.5,//省份边框
            },
            emphasis: {//鼠标hover样式
              label: {
                show: true,
                textStyle: {
                  color: '#fa4f04'
                }
              }
            }
          },
          type: "map",
          mapType: "map", // 自定义扩展图表类型
          zoom: 1.2,
          name: '情感分值',
          roam: true,
          showLegendSymbol: false,
          label: {
            normal: {
              show: true, //关闭省份名展示
            },
            emphasis: {
              show: true
            },
            // show: true,
          },
          data: ser
        }]
      })
    },
    drawMap2(v, ser) {
      let myChart = this.$echarts.init(document.getElementById('mapChart2'))
      this.$echarts.registerMap("map", v, {});
      myChart.setOption({
        title: {
          text: '疫情放开后',
          textStyle: {
            color: "#0ad9a6"
          },
          top: '3%',
          left: '3%',
        },
        backgroundColor: 'rgba(41,52,65,0.88)',
        tooltip: {
          trigger: 'item',
          show: true
        },
        visualMap: {
          min: 0,
          max: 1,
          realtime: false,
          calculable: false,
          show: true,
          inRange: {
            color: [
              'rgba(249,251,249,0.2)', 'rgba(248,3,113,0.5)'
            ]
          }
        },
        series: [{
          itemStyle: {
            normal: {
              label: {
                show: true,
                textStyle: {
                  color: "#f3f0f1"
                }
              },
              areaColor: 'rgba(128, 128, 128, 0)', //rgba设置透明度0
              borderColor: '#007bf1',//省份边框颜色
              borderWidth: 1.5,//省份边框
            },
            emphasis: {//鼠标hover样式
              label: {
                show: true,
                textStyle: {
                  color: '#fa4f04'
                }
              }
            }
          },
          type: "map",
          mapType: "map", // 自定义扩展图表类型
          zoom: 1.2,
          name: '情感分值',
          roam: true,
          showLegendSymbol: false,
          label: {
            normal: {
              show: true, //关闭省份名展示
            },
            emphasis: {
              show: true
            },
            show: true,
          },
          data: ser
        }],
      })
    },
    drawPie() {
      let myChart = this.$echarts.init(document.getElementById('pieChart'), 'chalk')
      myChart.setOption({
        title: {
          text: '四种情感占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 48, name: '喜悦'},
              {value: 17, name: '愤怒'},
              {value: 19, name: '厌恶'},
              {value: 16, name: '低落'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })

    }
  }
}
</script>

<style scoped>
h2 {
  color: #569ae0;
  margin-block-end: 0.2em;
}

.el-radio {
  margin-top: 1.6vh;
  margin-left: 2vw;
}

>>> .el-upload-dragger .el-icon-upload {
  line-height: 3vh;
}

>>> .el-upload-dragger {
  height: 14vh;
}

>>> .el-upload__tip {
  color: white;
  text-align: center;
}

h1 {
  color: #51d724;
}

</style>